<template>
  <a-modal
    :visible.sync="visible"
    v-bind="$attrs"
    v-on="$listeners"
    :maskClosable="false"
    :footer="null"
    width="500px"
    title="修改密码"
    wrapClassName="forget-modal-Visible-container"
    @cancel="_handleCancel()"
  >
    <a-form-model ref="forgetForm" :model="forgetForm" :rules="forgetRules">
      <!-- 新密码 -->
      <a-form-model-item ref="password" label="新密码" prop="password">
        <a-input-password
          v-model="forgetForm.password"
          placeholder="请输入新密码"
        />
      </a-form-model-item>
      <!-- 确认密码 -->
      <a-form-model-item
        ref="passwordRepeat"
        label="确认新密码"
        prop="passwordRepeat"
      >
        <a-input-password
          v-model="forgetForm.passwordRepeat"
          placeholder="请输入新密码"
        />
      </a-form-model-item>
    </a-form-model>
    <div class="form-footer flex">
      <a-button type="default" @click="_handleCancel()">取消 </a-button>
      <a-button
        type="primary"
        :loading="forgetLoading"
        @click="_handleSubmit()"
      >
        提交
      </a-button>
    </div>
  </a-modal>
</template>
<script>
/**
 *
 * 修改密码弹窗
 *
 * */
import { clearStorageData } from "@/tools";
import { updatePassword } from "@/api/auth.js";
export default {
  name: "changePassword",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      forgetLoading: false,
      forgetForm: {
        password: undefined,
        passwordRepeat: undefined,
      },
      forgetRules: {
        password: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        passwordRepeat: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //【修改密码】提交
    _handleSubmit() {
      this.$refs.forgetForm.validate((valid) => {
        if (valid) {
          this.forgetLoading = true;
          let { password, passwordRepeat } = this.forgetForm;
          if (password.trim() != passwordRepeat.trim()) {
            this.$message.error("两次输入的密码不一致，请重新输入");
            return;
          }
          updatePassword({
            loginId:
              JSON.parse(localStorage.getItem("USER_INFO"))?.username || "",
            password,
            passwordRepeat,
          })
            .then((res) => {
              this.$message.success("修改成功，请重新登录");
              this._handleCancel();
              clearStorageData();
              setTimeout((_) => {
                this.$router.replace({
                  path: loginPage,
                });
              }, 200);
            })
            .finally((_) => {
              this.forgetLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //关闭弹窗
    _handleCancel() {
      this.handleResetForm();
      this.$emit("update:visible", false);
    },

    //重置表单
    handleResetForm() {
      this.forgetLoading = false;
      this.$refs.forgetForm.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.forget-modal-Visible-container {
  .ant-form-item {
    .flex();
    .ant-form-item-label {
      width: 100px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
      margin-right: 20px;
      .ant-form-item-children {
        display: block;
        .ant-input-affix-wrapper {
          display: block;
        }
      }
    }
  }
  .form-footer {
    justify-content: center;
  }
}
</style>
